<template>
    <view class="toast">
        <u-toast ref="uToastRel" ></u-toast>
    </view> 
</template>

<script setup lang="ts">
/**
 * @author:  wyr
 * @description 【H5组件】loading组件--拉取数据时使用
 * @param { object} data - 对象{ type: 'loading', message: "加载中"}  
 * @param { Boolean} show - 双向绑定的数据，控制弹窗开关
 * @desc - 使用方式 <view @click="handleTest">测试toast</view>   
 * <toast :data="tipobj" v-model:show="showFlag"></toast>
 * const handleTest = ()=>{
    showFlag.value = true;
    tipobj={
        type: 'loading',
        message: "操作成功",
    }
}
 */

 import { watch } from 'vue';
 const props = defineProps({
    data:{ type:Object, default:()=>{}}, 
    show:{ type:Boolean, default:false},  // 双向绑定的数据
})

const uToastRel = ref<any>(null); 
const emit = defineEmits(['update:show'])

// 打开提示弹窗，之后show为false，抛出去
const showToast = (params:any)=> {  
    uToastRel.value.show({
        ...params,

        complete() {
            params.url && uni.navigateTo({
                url: params.url
            })
            emit('update:show',false);
        },
    })
}

watch(()=>props.show , (newVal,oldVal)=>{
    if(newVal){
        showToast(props.data);
    }
},{immediate:true})

</script>
<style lang="scss">
.u-toast{
    z-index: 99999;
}
</style>
